<template>
  <div>
    <h1>lesson3</h1>
    <div :class="{ active: isActive, 'text-danger': !hasError }">{ active: isActive, 'text-danger': !hasError }</div>
    <div :class="{ active: !isActive, 'text-danger': hasError }">{ active: !isActive, 'text-danger': hasError }</div>
    <div :class="[activeClass, errorClass]">    activeClass: 'active',
    errorClass: 'text-danger'</div>
    <hr />
    <div :style="{ color: activeColor, fontSize: fontSize + 'px' }">{ color: activeColor, fontSize: fontSize + 'px' }</div>
    <div :style="{ display: ['-webkit-box', '-ms-flexbox', '-moz-flexbox', 'flex'] }">
        <div style="width: 30px;">h1</div>
        <div style="width: 30px;">h2</div>
        <div style="width: 30px;">h2</div>   
    </div>
    <select v-model="s1">
      <option value="0">--请选择--</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
    <div v-if="s1 === '1'">1</div>
    <div v-else-if="s1 === '2'">2</div>
    <div v-else>3</div>
    <hr />
    <div v-show="s1 === '1'">1</div>
    <div v-show="s1 === '2'">2</div>
    <div v-show="s1 === '3'">3</div>
  </div>
  <hr />
  <div v-for="item in items" :key="item.message">
    {{ item.message }}
  </div>
  <hr />
  <div v-for="(item, index) in items" :key="item.message">
    {{ index }} - {{ item.message }}
  </div>
  <hr />
  <li v-for="{ message } in items">
    {{ message }}
  </li>
  
  <!-- 有 index 索引时 -->
  <li v-for="({ message }, index) in items">
    {{ message }} {{ index }}
  </li>
  <hr />
  <div v-for="n in myObject">{{ n }}</div>
  <hr />
  <div v-for="(value, key, index) in myObject" :key="index">
    {{ index }}. {{ key }}: {{ value }}
  </div>
  <hr />
  <form action="https://www.baidu.com/s?kw=vue">
    <button>搜索</button>
    <!-- 使用特殊的 $event 变量 -->
    <button @click="warn('Form cannot be submitted yet.', $event)">
    Submit
    </button>

    <!-- 使用内联箭头函数 -->
    <button @click="(event) => warn('Form cannot be submitted yet.', event)">
    Submit
    </button>
  </form>
</template>
<script>
export default {
  name: 'lesson3',
  data () {
    return {
      msg: 'lesson3',
      isActive: true,
      hasError: false,
      activeClass: 'active',
      errorClass: 'text-danger',
      activeColor: 'red',
      fontSize: 32,
      s1: '0',
      items: [{ message: 'Foo' }, { message: 'Bar' }],
      myObject: {
        title: 'How to do lists in Vue',
        author: 'Jane Doe',
        publishedAt: '2016-04-10'
      }
    }
  },
  methods: {
    warn (message, event) {
      // 现在我们可以访问原生事件对象
      if (event) {
        event.preventDefault()
      }
      alert(message)
    }
  },
  created() {
    let obj = {name: 'zhangsan', age: 18}
    let {name, age} = obj
    console.log(name, age)
    let {name: n, age: a} = obj
    console.log(n, a)

  }
}
</script>
<style>
.active { background-color: #000; }
.text-danger { color: red; }
</style>